import React, { FC, MouseEvent } from "react";
import styles from "./StatLeft.module.scss";
import classnames from "classnames";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import { getComponentConfByType } from "../../../components/QusetionComponent";
import { ComponentInfoType } from "../../../store/componentsReducer";
const getComponent = (componentInfo: ComponentInfoType) => {
  const { type, props } = componentInfo;
  const componentConfig = getComponentConfByType(type);
  if (!componentConfig) return null;
  const { Component } = componentConfig;
  return <Component {...props} />;
};

type PropsType = {
  selectedComponentId: string;
  selectedComponentType:string
  setSelectedComponentId: (id: string) => void;
  setSelectedComponentType: (type: string) => void;
};

const StatLeft: FC<PropsType> = (props) => {
  const {
    selectedComponentId,
    selectedComponentType,
    setSelectedComponentId,
    setSelectedComponentType,
  } = props;

  const { componentList } = useGetComponentInfo();
  return (
    <div className={styles["canvas"]}>
      {componentList
        .filter((c) => !c.isHidden)
        .map((c) => {
          const { fe_id, type } = c;
          const wrapperDefaultClassName = styles["component-wrapper"];
          const selectedClassName = styles["selected"];
          const wrapperClass = classnames({
            [wrapperDefaultClassName]: true,
            [selectedClassName]: fe_id === selectedComponentId,
          });
          return (
            <div
              key={fe_id}
              className={wrapperClass}
              onClick={() => {
                setSelectedComponentId(fe_id);
                setSelectedComponentType(type);
                console.log(selectedComponentType);
                
              }}
            >
              <div className={styles.component}>{getComponent(c)}</div>
            </div>
          );
        })}
    </div>
  );
};

export default StatLeft;
